<script setup>
import { ref,reactive } from 'vue'
import { Edit,Delete } from '@element-plus/icons-vue'

//文本框value值
const input = ref('')

//表单是否显示，响应式变量
const dialogFormVisible = ref(false)

//文本框宽度
const formLabelWidth = '140px'

//时间框value值
const value1 = ref('')
const value2 = ref('')

//定义表单属性
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

//测试数据
const testdata=[
  {
    "id":1,
    "orderNo":'DD00014',
    "productionNo":'SC/100014',
    "Product_model_name":'EE1006',
    "production _num":'20',
    "time1":'2022-10-23',
    "time2":'2022-10-25',
  }
]
</script>

<template>
  <!-- 添加订单表单 -->
  <el-dialog v-model="dialogFormVisible" title="添加订单">
    <el-form :model="form">
      <el-form-item label="订单生产编号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
        <span><h6 style="margin:0">格式示例:可由字母、数字、下划线组合,如abc123、abc、abc_123</h6></span>
      </el-form-item>
      <el-form-item label="生产序号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
        <span><h6 style="margin:0">格式示例:可由字母、数字、下划线组合,如abc123、abc、abc_123</h6></span>
      </el-form-item>
      <el-form-item label="计划生产数量" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="订单生产时间" :label-width="formLabelWidth">
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="订单生产时间"
      />
      </el-form-item>
      <el-form-item label="交付时间" :label-width="formLabelWidth">
        <el-date-picker
        v-model="value2"
        type="date"
        placeholder="交付时间"
      />
      </el-form-item>
      <el-form-item label="订单优先级" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="选择优先级">
          <el-option label="高" value="高" />
          <el-option label="中" value="中" />
          <el-option label="低" value="低" />
        </el-select>
      </el-form-item>
      <el-form-item label="产品货号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" style="width:100px"/>
        <el-button type="primary">选择产品</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <el-row style="background-color:white;margin:10px 10px 0 10px">
    <el-col :span="3" style="margin:10px 0 0 10px">订单列表</el-col>
    <el-col :span="2" :offset="15" style="margin-top:10px">
      <el-button type="success"  @click="dialogFormVisible = true">添加订单</el-button>
    </el-col>
    <el-col :span="3" style="margin-top:10px">
      <el-button type="success">批量上传订单</el-button>
    </el-col>
  </el-row>
  <el-row style="background-color:white;margin:0 10px 0 10px">
    <el-col :span="2" style="margin:10px 0 0 10px"><el-button :icon="Refresh">刷新</el-button></el-col>
      <el-col :span="19" style="margin-top:10px"><el-input v-model="input" placeholder="请输入生产序号或产品编号" /></el-col>
      <el-col :span="2" style="margin-top:10px"><el-button type="success">搜索</el-button></el-col>
  </el-row>
  <el-row style="background-color:white;margin:0 10px 0 10px">
    <el-col :span="24" style="margin-top:15px">
           <!--斑马纹效果 带边框 -->
      <el-table :data="testdata"  stripe border style="width:100%">
        <!-- 定义列表属性 -->
         <el-table-column label="序号" align="center"  prop="id" width="100"></el-table-column>
         <el-table-column  label="订单产品编号" align="center" prop="orderNo" width="150" />
         <el-table-column  label="生产编号" align="center" prop="productionNo" width="150" />
         <el-table-column  label="订单产品型号" align="center" prop="Product_model_name" width="150" />
         <el-table-column  label="计划生产数量" align="center" prop="production _num" width="120" />
         <el-table-column  label="计划时间" align="center" prop="time1" width="150" />
         <el-table-column  label="交付时间" align="center" prop="time2" width="150" />
         <el-table-column label="编辑" align="center">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" size="small">暂停订单</el-button>
            <el-button type="danger" :icon="Delete" size="small">终止订单</el-button>
          </template>
         </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-form-item .el-select {
  width: 300px;
}
.el-form-item .el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>